<template>
  <div class="status-test">
    <h1>状态显示测试</h1>
    
    <div class="status-grid">
      <div v-for="status in testStatuses" :key="status.key" class="status-item">
        <h3>{{ status.name }}</h3>
        <div class="status-container">
          <img 
            :src="getStatusIcon(status.key)" 
            :alt="getStatusText(status.key)"
            class="status-icon"
          />
          <span 
            class="status-text"
            :style="{ color: getStatusColor(status.key) }"
          >
            {{ getStatusText(status.key) }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { t as $t } from '@/plugins/i18nPlugin'
import completeIcon from '@/assets/complete.png'
import pendingIcon from '@/assets/pending.png'

// 测试状态数据
const testStatuses = [
  { key: 'created', name: '创建状态' },
  { key: 'pending', name: '待批改状态' },
  { key: 'grading', name: '批改中状态' },
  { key: 'correction', name: '待订正状态' },
  { key: 'correcting', name: '订正中状态' },
  { key: 'completed', name: '已完成状态' }
]

// 获取状态图标
const getStatusIcon = (status: string): string => {
  switch (status) {
    case 'pending':
      return pendingIcon    // 待批改 - 灰色圆圈
    case 'grading':
      return pendingIcon    // 批改中 - 蓝色圆圈
    case 'correction':
      return pendingIcon    // 待订正 - 灰色圆圈
    case 'correcting':
      return pendingIcon    // 订正中 - 蓝色圆圈
    case 'completed':
      return completeIcon   // 已完成 - 绿色勾选
    case 'created':
      return completeIcon   // 创建 - 绿色勾选
    default:
      return pendingIcon
  }
}

// 获取状态颜色
const getStatusColor = (status: string): string => {
  switch (status) {
    case 'pending':
      return '#909399'  // 灰色 - 待批改
    case 'grading':
      return '#409EFF'  // 蓝色 - 批改中
    case 'correction':
      return '#909399'  // 灰色 - 待订正
    case 'correcting':
      return '#409EFF'  // 蓝色 - 订正中
    case 'completed':
      return '#67C23A'  // 绿色 - 已完成
    case 'created':
      return '#67C23A'  // 绿色 - 创建
    default:
      return '#909399'
  }
}

// 获取状态文本
const getStatusText = (status: string): string => {
  switch (status) {
    case 'pending':
      return $t('assets.taskList.pending')
    case 'grading':
      return $t('assets.taskList.grading')
    case 'correction':
      return $t('assets.taskList.correction')
    case 'correcting':
      return $t('assets.taskList.correcting')
    case 'completed':
      return $t('assets.taskList.completed')
    case 'created':
      return $t('assets.taskList.created')
    default:
      return status
  }
}
</script>

<style scoped>
.status-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.status-item {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

.status-item h3 {
  margin-bottom: 15px;
  color: #333;
}

/* 状态容器 */
.status-container {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.status-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.status-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
</style>
